<template>
  <mavon-editor
    v-model="content"
    :toolbars="markdownOption.toolbars"
    :code-style="markdownOption.codeStyle"
    :subfield="markdownOption.subfield"
    @save="onSave"
    @fullScreen="markdownOption.fullScreen"
  />
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  name: 'MarkdownEditor',
  components: {
    mavonEditor
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    onSave: {
      type: Function,
      default: function() {}
    }
  },
  data: function() {
    return {
      content: '',
      markdownOption: {
        codeStyle: 'tomorrow',
        subfield: false,
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true // 预览
        },
        fullScreen: this.markdownFullScreen
      }
    }
  },
  watch: {
    value(val) {
      this.value = val
      this.content = this.value
    },
    content() {
      this.$emit('change', this.content)
    }
  },
  methods: {
    markdownFullScreen(status) {
      if (status) {
        this.$root.$emit('indexUp')
      } else {
        this.$root.$emit('indexDown')
      }
    }
  }
}
</script>

<style scoped>
.markdown-body {
  height: calc(90vh - 125px);
}
</style>
